<template>
  <div>

    <div>
      <!--头部开始-->
      <div style="height: 50px;background-color:#3c7fff;display: flex;align-items: center">
        <div style="width: 200px;display:flex;align-items: center;font-size: 20px;color:white">管理员后台管理系统</div>
        <div style="flex: 1"></div>



        <div style="width: fit-content;display: flex;align-items: center ;padding-right: 10px">
          <span style="color:white;margin-right: 10px">{{data.user.role}}</span>
          <img :src="data.user.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"  alt="" style="border-radius:50%; width: 40px;height: 40px">
          <span style="color:white;margin-left: 5px">{{data.user.name}}</span>
        </div>
        
      </div>


    </div>
    <!--头部结束-->

    <!--从下面部分开始-->
    <div style="display: flex">
      <!--左侧导航菜单开始-->
      <div style="width: 200px; border-right: 1px solid #ddd;min-height: calc(100vh - 50px)">
        <el-menu router :default-active="router.currentRoute.value.path" style="border: 0" >

        <el-menu-item index="/admin_manager/home" >
          <template #title>
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </template>
        </el-menu-item>


          <el-sub-menu index="1">
            <template #title>
              <el-icon><Memo /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/admin_manager/notice">公告信息</el-menu-item>
            <el-menu-item index="/admin_manager/room_type">房间分类</el-menu-item>
            <el-menu-item index="/admin_manager/room_information">客房信息</el-menu-item>
            <el-menu-item index="/admin_manager/check_in">入住登记</el-menu-item>
            <el-menu-item index="/admin_manager/comments">评论管理</el-menu-item>
            <el-menu-item index="/admin_manager/order">订单管理</el-menu-item>
            <el-menu-item index="/admin_manager/room_image">房间图片管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin_manager/admin_information">管理员信息</el-menu-item>
            <el-menu-item index="/admin_manager/owner_information">房东信息</el-menu-item>
            <el-menu-item index="/admin_manager/user_information">用户信息</el-menu-item>
          </el-sub-menu>

          <el-menu-item @click="logout">
            <template #title>
              <el-icon><SwitchButton /></el-icon>
              <span>退出登录</span>
            </template>
          </el-menu-item>

          <el-menu-item index="/admin_manager/person">
            <el-icon><Edit /></el-icon>
            <template #title>
            <span>个人信息</span>
            </template>
          </el-menu-item>

        </el-menu>
      </div>
      <!--左侧导航菜单结束-->

      <!--右侧主体区域开始-->
      <div style="flex: 1;width: 0;background-color: #f5f7ff;padding: 10px">
       <router-view @updateUser="updateUser"/>
      </div>

    </div>

  </div>
</template>

<script setup>
import {HomeFilled} from "@element-plus/icons-vue"
import router from "../router";
import {reactive} from "vue";
// import {useWebSocketStore} from "../stores/webSocket.js";
// const websocketStore = useWebSocketStore();

const data=reactive({
  user:JSON.parse(localStorage.getItem('localStorageUser'))?JSON.parse(localStorage.getItem('localStorageUser')):{}
})

const updateUser=()=>{
  data.user=JSON.parse(localStorage.getItem('localStorageUser'))
}

const logout=()=>{
  localStorage.removeItem('localStorageUser')
  localStorage.removeItem('token')
  location.href = '/login'
  // websocketStore.closeWebSocket();

}
</script>

<style scoped>
.user-info -container {
                 display: flex;
                 align-items: center;
                 padding-right: 10px;
                 width: fit-content;
               }

.role-text {
          color: white;
          margin-left: -50px;
          font-weight: 600;
          font-size: 14px;
        }

.user-avatar {
          border-radius: 50%;
          width: 40px;
          height: 40px;
          margin-left: 10px;
          object-fit: cover;
        }

.name-text {
          color: white;
          margin-left: 10px;
          font-weight: 600;
          font-size: 14px;
        }
</style>